import React, { Component } from 'react'
// 7. 导入 store
import store from './store/index'

import axios from 'axios'

export default class App extends Component {

  componentDidMount(){
    // fetch 是 js 里面的一个请求方法
    fetch('/banner/list').then(res=> res.json()).then(res => {
      // console.log(res.data);
      // 调用全局状态中的方法 change_banner_list
      store.dispatch({type: 'change_banner_list', payload: res.data})
    })

    axios.get('/pro/list').then(res => {
      store.dispatch({type: 'change_pro_list', payload: res.data.data})
    })

  }

  render() {

    console.log(store.getState());
    return (
      <div>
        App
        {/* 8. 在组件中通过 store.getState() 获取全局状态 */}
        <h1>{store.getState().app.count}</h1>

        <button onClick={()=>{
          store.dispatch({type: 'add'})
        }}>加 1</button>

        <button onClick={()=>{
          store.dispatch({type: 'reduce'})
        }}>减 1</button>

        <button onClick={()=>{
          store.dispatch({type: 'addNum', payload: 10})
        }}>加 10</button>


        <button onClick={()=>{
          store.dispatch({type: 'reduceNum', payload: 10})
        }}>减 10</button>

        {store.getState().pro.bannerList.map((item,index) => {
          return (<p key={index}><img style={{height: 100}} src={item.img} alt="" /></p>)
        })}

        {store.getState().pro.proList.map(item => {
          return (<p key={item.proid}>{item.proname}</p>)
        })}

      </div>
    )
  }
}
